<template>
  <div>
    <van-loading :color="loadingList.color" vertical>{{ loadingList.title }}</van-loading>
    <div class="mask" v-bind:class="{ 'bottom-mask': loadingList.isBottomMask }"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'

interface State {
  loadingList: {
    title: string
    color: string
    isBottomMask: boolean
  }
}

export default defineComponent({
  name: 'Loading',
  setup() {
    const state = reactive<State>({
      loadingList: {
        title: '加载中...', //提示信息
        color: '#c9c9c9', //加载颜色
        isBottomMask: false //是否遮住页面,只显示返回
      }
    })

    const setLoading = (val: any) => {
      state.loadingList = { ...state.loadingList, ...val }
    }
    return {
      ...toRefs(state),
      setLoading
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
.van-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
// 遮罩层
.mask {
  width: 100%;
  height: calc(100% - 138px);
  background-color: transparent;
  position: fixed;
  top: 88px;
  left: 0;
  z-index: 1;
}
.bottom-mask {
  height: calc(100% - 88px);
  background-color: $background-color-base;
}
</style>
